<template>
  <div class="service_contract">
    <div class="flex top">
      <div class="flex-1">
        <img class="w-100 h-100" src="../../assets/images/risk.jpg" alt="百融风控" />
      </div>
      <div class="right">
        <p class="flex flex-between align-center">
          <span style="font-size: 20px">风控账户</span>
          <span class="blue-font pointer" @click="checkRecords">购买记录</span>
        </p>
        <p class="flex flex-between align-center" style="margin: 15px 0 10px">
          <span class="color-666">百融风控余量</span>
          <span class="color-666">{{ risk_credit_amount }}次</span>
        </p>
        <el-button class="w-100" type="primary" style="font-size: 18px" @click="toBuy">去购买</el-button>
        <el-divider></el-divider>
        <p class="flex flex-between align-center">
          <span class="color-666">自动充值（{{
          risk_credit_automatic == 1 ? "已开启" : "未开启"
          }}）</span>
          <span class="blue-font pointer" @click="autoRecharge">{{
          risk_credit_automatic == 1 ? "关闭" : "开启"
          }}</span>
        </p>
        <el-tag class="w-100 text-center" type="warning">开启自动充值避免风控次数不足</el-tag>
      </div>
    </div>
    <h5 class="record_header">百融风控记录</h5>
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单编号">
          <el-input style="width: 230px" v-model="searchForm.order_id" placeholder="请输入订单编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="searchForm.user_name" placeholder="请输入用户姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.user_mobile" placeholder="请输入手机号" clearable></el-input>
        </el-form-item>
        <el-form-item label="查询时间">
          <my-date-picker ref="myDatePicker"></my-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border>
      <el-table-column align="center" width="80" prop="id" label="ID" />
      <el-table-column align="center" width="190" label="订单编号">
        <template slot-scope="scope">
          <span class="blue-font pointer" @click="goToOrder(scope.row.trade_no)">{{ scope.row.trade_no }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="user_name" label="用户名" />
      <el-table-column align="center" prop="user_idcard" label="用户身份证号" />
      <el-table-column align="center" prop="user_mobile" label="用户手机号" />
      <el-table-column align="center" prop="risk_data" label="风控详情" />
      <!-- <template slot-scope="scope">
          <span
            class="blue-font pointer"
            @click="checkUrl(scope.row.risk_report_url ?$globalObj.imgBaseUrl + scope.row.risk_report_url : '')"
            >查看报告</span>
        </template> -->
      <el-table-column align="center" prop="create_time" label="查询时间" />
    </el-table>
    <custom-page ref="customPage" :total="total" @getList="getList"></custom-page>
    <buy-dialog ref="buyDialog" dialog-title="风控次数购买" @getList="getList" :type="3"></buy-dialog>
    <recharge-dialog ref="rechargeDialog" dialog-title="风控自动充值" @getList="getList" :type="3"></recharge-dialog>
  </div>
</template>

<script>
import {
  getShopRiskCreditList,
  autoRecharge,
  getShopRiskCreditStuatus,
  riskCreditAutoRecharge
} from "@/api/marketing";
import customPage from "@/components/customPage";
import myDatePicker from "@/components/myDatePicker";
import buyDialog from "./components/buy";
import rechargeDialog from "./components/recharge";
export default {
  components: { customPage, myDatePicker, buyDialog, rechargeDialog },
  data() {
    return {
      tableData: [],
      total: 0,
      searchForm: {
        order_id: "",
        user_name: "",
        user_mobile: "",
        create_time: "",
      },
      risk_credit_automatic: 0,
      risk_credit_amount: 0,
      disabled: false,
    };
  },
  methods: {
    checkUrl(url) {
      if (url) {
        window.open(url);
      } else {
        this.$message.warning("暂无法查看报告");
        return;
      }
    },
    // 自动充值
    autoRecharge() {
      if (!this.showTip()) {
        return;
      }
      if (this.risk_credit_automatic == 1) {
        // 关闭
        this.$confirm("确认要关闭自动充值吗?", "关闭自动充值", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(() => {
            riskCreditAutoRecharge().then((res) => {
              this.getList();
            });
          })
          .catch(() => { });
      } else {
        // 开启
        this.$refs.rechargeDialog.dialogVisible = true;
      }
    },
    // 去购买
    toBuy() {
      if (!this.showTip()) {
        return;
      }
      this.$refs.buyDialog.dialogVisible = true;
    },
    // 查看合同购买记录
    checkRecords() {
      if (!this.showTip()) {
        return;
      }
      this.$router.push({ name: "serviceRiskRecord" });
    },
    // 查询
    search() {
      if (!this.showTip()) {
        return;
      }
      const pickerVal = this.$refs.myDatePicker.getVal();
      if (pickerVal !== "error") {
        this.searchForm.create_time = pickerVal;
        this.$refs.customPage.page = 1;
        this.getList();
      }
    },
    // 重置
    reset() {
      if (!this.showTip()) {
        return;
      }
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset();
      }
      this.searchForm = {
        order_id: "",
        user_name: "",
        user_mobile: "",
        create_time: "",
      };
      this.getList();
    },
    // 获取数据
    getList() {
      const { page, pageSize } = this.$refs.customPage;
      getShopRiskCreditList({
        page,
        pageSize,
        ...this.searchForm,
      }).then((res) => {
        const { data, risk_credit_automatic, risk_credit_amount } = res;
        this.tableData = data.data || [];
        this.total = data.total || 0;
        this.risk_credit_automatic = risk_credit_automatic;
        this.risk_credit_amount = risk_credit_amount;
      });
    },
    goToOrder(orderId) {
      if (orderId) {
        this.$router.push({ name: "orderList", params: { orderId } });
      }
    },
    getData() {
      getShopRiskCreditStuatus()
        .then((res) => {
          this.disabled = false;
          this.getList();
        })
        .catch((err) => {
          //   this.disabled = true;
        });
    },
    showTip() {
      if (this.disabled) {
        this.$message({
          message: "该店铺暂未开启百融风控, 请先开启后再查看该功能",
          type: "error",
        });
        return false;
      }
      return true;
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.top {
  height: 300px;

  .el-divider--horizontal {
    margin: 20px 0;
  }
}

.right {
  width: 345px;
  margin-left: 20px;
  padding: 20px;
  border: 1px solid #e6e6e6;

  p {
    line-height: 32px;
  }

  span {
    font-size: 16px;
  }

  .el-tag {
    color: #ff8500;
    margin-top: 10px;
    font-size: 14px;
  }
}

.record_header {
  padding-left: 15px;
  border-left: 3px solid $mainBlue;
  margin: 20px 0;
}
</style>
